import React, { useState } from 'react';
import { Button, Input, TextArea, ImageUploader, Toast, NavBar } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './OnlineRepair.module.css';

function OnlineRepair() {
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    dormitory: '',
    contact: '',
    phone: '',
    description: '',
    images: []
  });

  // 处理表单输入
  const handleInputChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  // 处理图片上传
  const handleImageUpload = async (file) => {
    // 这里可以添加图片压缩和上传逻辑
    return {
      url: URL.createObjectURL(file),
      file: file
    };
  };

  // 处理图片删除
  const handleImageDelete = (item) => {
    setFormData(prev => ({
      ...prev,
      images: prev.images.filter(img => img.url !== item.url)
    }));
  };

  // 表单验证
  const validateForm = () => {
    if (!formData.dormitory.trim()) {
      Toast.show('请填写宿舍信息');
      return false;
    }
    if (!formData.contact.trim()) {
      Toast.show('请填写联系人');
      return false;
    }
    if (!formData.phone.trim()) {
      Toast.show('请填写联系电话');
      return false;
    }
    if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
      Toast.show('请填写正确的手机号码');
      return false;
    }
    if (!formData.description.trim()) {
      Toast.show('请填写故障说明');
      return false;
    }
    return true;
  };

  // 提交报修申请
  const handleSubmit = async () => {
    if (!validateForm()) {
      return;
    }

    try {
      // 这里可以添加实际的API调用
      console.log('提交报修申请:', formData);
      
      Toast.show({
        content: '报修申请提交成功！我们会尽快安排维修人员处理。',
        duration: 3000
      });

      // 清空表单
      setFormData({
        dormitory: '',
        contact: '',
        phone: '',
        description: '',
        images: []
      });

      // 延迟返回上一页
      setTimeout(() => {
        navigate(-1);
      }, 2000);

    } catch (error) {
      console.error('提交失败:', error);
      Toast.show('提交失败，请重试');
    }
  };

  return (
    <div className={styles.container}>
      {/* 导航栏 */}
      <NavBar 
        onBack={() => navigate(-1)}
        className={styles.navbar}
      >
        在线报修
      </NavBar>

      {/* 表单内容 */}
      <div className={styles.formContainer}>
        <div className={styles.formSection}>
          <div className={styles.sectionTitle}>基本信息</div>
          
          {/* 宿舍信息 */}
          <div className={styles.formItem}>
            <div className={styles.label}>
              <span className={styles.required}>*</span>
              宿舍
            </div>
            <Input
              placeholder="请输入宿舍号，如：1栋101室"
              value={formData.dormitory}
              onChange={(value) => handleInputChange('dormitory', value)}
              className={styles.input}
            />
          </div>

          {/* 联系人 */}
          <div className={styles.formItem}>
            <div className={styles.label}>
              <span className={styles.required}>*</span>
              联系人
            </div>
            <Input
              placeholder="请输入联系人姓名"
              value={formData.contact}
              onChange={(value) => handleInputChange('contact', value)}
              className={styles.input}
            />
          </div>

          {/* 联系电话 */}
          <div className={styles.formItem}>
            <div className={styles.label}>
              <span className={styles.required}>*</span>
              联系电话
            </div>
            <Input
              placeholder="请输入手机号码"
              type="tel"
              value={formData.phone}
              onChange={(value) => handleInputChange('phone', value)}
              className={styles.input}
            />
          </div>
        </div>

        <div className={styles.formSection}>
          <div className={styles.sectionTitle}>故障信息</div>
          
          {/* 故障说明 */}
          <div className={styles.formItem}>
            <div className={styles.label}>
              <span className={styles.required}>*</span>
              故障说明
            </div>
            <TextArea
              placeholder="请详细描述故障情况，如：水龙头漏水、灯泡不亮、门锁损坏等"
              value={formData.description}
              onChange={(value) => handleInputChange('description', value)}
              rows={4}
              maxLength={500}
              showCount
              className={styles.textarea}
            />
          </div>

          {/* 故障照片 */}
          <div className={styles.formItem}>
            <div className={styles.label}>
              故障照片
              <span className={styles.optional}>（可选，最多上传6张）</span>
            </div>
            <ImageUploader
              value={formData.images}
              onChange={(images) => handleInputChange('images', images)}
              upload={handleImageUpload}
              onDelete={handleImageDelete}
              maxCount={6}
              multiple
              className={styles.imageUploader}
            >
              <div className={styles.uploadButton}>
                <div className={styles.uploadIcon}>📷</div>
                <div className={styles.uploadText}>添加照片</div>
              </div>
            </ImageUploader>
            <div className={styles.uploadTip}>
              建议上传故障现场照片，有助于维修人员快速定位问题
            </div>
          </div>
        </div>

        {/* 提交按钮 */}
        <div className={styles.submitSection}>
          <Button
            color="primary"
            size="large"
            onClick={handleSubmit}
            className={styles.submitButton}
          >
            提交报修申请
          </Button>
        </div>

        {/* 温馨提示 */}
        <div className={styles.tipSection}>
          <div className={styles.tipTitle}>温馨提示</div>
          <div className={styles.tipContent}>
            <div className={styles.tipItem}>• 请确保联系方式准确，以便维修人员及时联系您</div>
            <div className={styles.tipItem}>• 紧急情况请直接拨打后勤服务热线：027-68752000</div>
            <div className={styles.tipItem}>• 一般故障我们会在24小时内安排维修</div>
            <div className={styles.tipItem}>• 您可以在"我的报修"中查看处理进度</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default OnlineRepair;